<div cdkDropListGroup>
  <div class="demo-list">

    <h2>To do</h2>
    <div
      cdkDropList
      (cdkDropListDropped)="drop($event)"
      [cdkDropListLockAxis]="axisLock"
      [cdkDropListData]="todo">
      <div *ngFor="let item of todo" cdkDrag>
        {{item}}
        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
      </div>
    </div>
  </div>

  <div class="demo-list">
    <h2>Done</h2>
    <div
      cdkDropList
      (cdkDropListDropped)="drop($event)"
      [cdkDropListLockAxis]="axisLock"
      [cdkDropListData]="done">
      <div *ngFor="let item of done" cdkDrag>
        {{item}}
        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
      </div>
    </div>
  </div>
</div>

<div cdkDropListGroup>
  <div class="demo-list demo-list-horizontal">
    <h2>Ages</h2>
    <div
      cdkDropList
      cdkDropListOrientation="horizontal"
      (cdkDropListDropped)="drop($event)"
      [cdkDropListLockAxis]="axisLock"
      [cdkDropListData]="ages">
      <div *ngFor="let item of ages" cdkDrag>
        {{item}}
        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
      </div>
    </div>
  </div>

  <div class="demo-list demo-list-horizontal" style="text-align: right">
    <h2>Preferred Ages</h2>
    <div
      cdkDropList
      cdkDropListOrientation="horizontal"
      (cdkDropListDropped)="drop($event)"
      [cdkDropListLockAxis]="axisLock"
      [cdkDropListData]="preferredAges">
      <div *ngFor="let item of preferredAges" cdkDrag>
        {{item}}
        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
      </div>
    </div>
  </div>
</div>

<div class="demo-list">
  <h2>Free dragging</h2>
  <div cdkDrag class="demo-free-draggable" [cdkDragLockAxis]="axisLock" [cdkDragStartDelay]="dragStartDelay">Drag me around</div>
</div>

<div>
  <h2>Data</h2>
  <pre>{{todo.join(', ')}}</pre>
  <pre>{{done.join(', ')}}</pre>
  <pre>{{ages.join(', ')}}</pre>
  <pre>{{preferredAges.join(', ')}}</pre>
</div>

<div>
  <h2>Axis locking</h2>
  <mat-form-field>
    <mat-label>Lock position along axis</mat-label>
    <mat-select [(ngModel)]="axisLock">
      <mat-option>None</mat-option>
      <mat-option value="x">X axis</mat-option>
      <mat-option value="y">Y axis</mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div>
  <h2>Drag start delay</h2>

  <mat-form-field>
    <input matInput placeholder="Drag start delay" value="0" [(ngModel)]="dragStartDelay">
  </mat-form-field>
</div>
